<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <view class="header-content">
        <view class="user-info">
          <image class="avatar" src="/static/avatar.png" mode="aspectFit"></image>
          <text class="welcome-text">{{ shopName }}，欢迎您</text>
        </view>
        
        <view class="header-actions">
          <view class="action-btn" @click="scanCode">
            <uni-icons type="scan" size="20" color="#333"></uni-icons>
            <text>扫码核销</text>
          </view>
          <view class="action-btn" @click="inputCode">
            <uni-icons type="compose" size="20" color="#333"></uni-icons>
            <text>输入核销码</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能菜单网格 -->
    <view class="menu-grid">
      <view 
        class="menu-item" 
        v-for="(item, index) in menuItems" 
        :key="index"
        @click="navigateTo(item.path)"
      >
        <view class="menu-icon" :style="{ backgroundColor: item.color }">
          <uni-icons :type="item.icon" size="24" color="white"></uni-icons>
          <view v-if="item.badge" class="badge"></view>
        </view>
        <text class="menu-text">{{ item.name }}</text>
      </view>
    </view>

    <!-- 最新通知 -->
    <view class="notification-section">
      <view class="section-header">
        <uni-icons type="notification" size="18" color="#ff9500"></uni-icons>
        <text class="section-title">最新通知</text>
        <text class="more-link">今日需上门取车任务32单>></text>
      </view>
      
      <view class="notification-table">
        <view class="table-header">
          <text class="col-user">用户</text>
          <text class="col-service">服务项目</text>
          <text class="col-time">时间</text>
        </view>
        
        <view 
          class="table-row" 
          v-for="(record, index) in serviceRecords" 
          :key="index"
        >
          <text class="col-user">{{ record.user }}</text>
          <text class="col-service">{{ record.service }}</text>
          <text class="col-time">{{ record.time }}</text>
        </view>
      </view>
    </view>
	
	<!-- 退出登录按钮 -->
	<view class="logout-btn-container">
	  <button class="logout-btn" @click="confirmLogout">退出登录</button>
	</view>
	
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const shopName = ref('XXX修车厂')

const menuItems = ref([
  { name: '经营统计', icon: 'chart', color: '#007aff', path: '/pages/statistics/statistics' },
  { name: '核销记录', icon: 'list', color: '#ff9500', path: '/pages/records/records' },
  { name: '收支明细', icon: 'wallet', color: '#34c759', path: '/pages/finance/finance' },
  { name: '订单管理', icon: 'email', color: '#007aff', path: '/pages/orders/orders', badge: true },
  { name: '卡券管理', icon: 'gift', color: '#ff9500', path: '/pages/coupons/coupons' },
  { name: '维修任务', icon: 'gear', color: '#ff3b30', path: '/pages/repair/repaire', badge: true },
  { name: '评价管理', icon: 'star', color: '#007aff', path: '/pages/reviews/reviews' },
  { name: '商户资料', icon: 'contact', color: '#8e8e93', path: '/pages/profile/profile' },
  { name: '活动发布', icon: 'notification', color: '#ff9500', path: '/pages/activities/activities' }
])

const serviceRecords = ref([
  { user: '张**', service: '汽车精洗', time: '2022-10-10 11:09' },
  { user: '张**', service: '汽车美容、基础保养', time: '2022-10-10 11:09' },
  { user: '张**', service: '车辆维修-上门取车', time: '2022-10-10 11:09' },
  { user: '张**', service: '汽车美容、基础保养', time: '2022-10-10 11:09' },
  { user: '张**', service: '车辆维修-到店维修', time: '2022-10-10 11:09' }
])

const scanCode = () => {
  uni.scanCode({
    success: (res) => {
      console.log('扫码结果：', res.result)
      uni.showToast({
        title: '扫码成功',
        icon: 'success'
      })
    },
    fail: (err) => {
      console.log('扫码失败：', err)
    }
  })
}

const inputCode = () => {
  uni.showModal({
    title: '输入核销码',
    editable: true,
    placeholderText: '请输入核销码',
    success: (res) => {
      if (res.confirm && res.content) {
        uni.showToast({
          title: '核销成功',
          icon: 'success'
        })
      }
    }
  })
}

const navigateTo = (path) => {
  if (path) {
    uni.navigateTo({
      url: path
    })
  } else {
    uni.showToast({
      title: '功能开发中',
      icon: 'none'
    })
  }
}

// 确认退出登录
const confirmLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        logout()
      }
    }
  })
}

// 执行退出登录
const logout = () => {
  uni.showLoading({
    title: '正在退出...'
  })
  
  // 模拟退出请求
  setTimeout(() => {
    // 清除登录状态（根据实际项目调整）
    uni.removeStorageSync('token')
    uni.removeStorageSync('userInfo')
    
    uni.hideLoading()
    uni.reLaunch({
      url: '/pages/login/login'
    })
  }, 1000)
}

onMounted(() => {
  // 页面加载时的初始化操作
  console.log('主页加载完成')
})
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; /* 为退出按钮留出空间 */
}

.header {
  background: linear-gradient(135deg, #007aff, #5856d6);
  padding: 40rpx 30rpx 60rpx;
  color: white;
}

.header-content {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: white;
}

.welcome-text {
  font-size: 32rpx;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  background-color: white;
  color: #333;
  padding: 20rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  font-size: 28rpx;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  padding: 40rpx 30rpx;
  background-color: white;
  margin: -30rpx 20rpx 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.badge {
  position: absolute;
  top: -5rpx;
  right: -5rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #ff3b30;
  border-radius: 50%;
}

.menu-text {
  font-size: 26rpx;
  color: #333;
  text-align: center;
}

.notification-section {
  background-color: white;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.more-link {
  margin-left: auto;
  color: #ff3b30;
  font-size: 26rpx;
}

.notification-table {
  border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  overflow: hidden;
}

.table-header,
.table-row {
  display: flex;
  align-items: center;
  padding: 20rpx 15rpx;
  font-size: 26rpx;
}

.table-header {
  background-color: #f8f8f8;
  font-weight: bold;
  color: #666;
}

.table-row {
  border-top: 1rpx solid #e0e0e0;
}

.table-row:nth-child(even) {
  background-color: #fafafa;
}

.col-user {
  flex: 1;
  text-align: center;
}

.col-service {
  flex: 2;
  text-align: center;
}

.col-time {
  flex: 1.5;
  text-align: center;
  font-size: 24rpx;
  color: #666;
}

/* 退出登录按钮样式 */
.logout-btn-container {
  padding: 30rpx;
  margin-top: 40rpx;
}

.logout-btn {
  width: 100%;
  height: 90rpx;
  background-color: #ff3b30;
  color: white;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-btn:active {
  opacity: 0.8;
}
</style>